<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="description" content="新网页设计师。web标准的教程站点，推动web标准在中国的应用" />
<meta name="keywords" content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" />
<title>上传头像</title>
<link rel="icon" type="image/x-icon" href="http://static.test.com/images/common/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="http://static.test.com/images/common/favicon.ico" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/base.css" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/uc.css" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/guide.css" />

<style>
.user_friend{width:800px;margin:0 auto;border:1px solid #CEE1EE}
.friend_selector{overflow:hidden;}
.friend_selector li{float:left;height:56px;padding:2px 0;overflow:hidden;width:150px;}

.friend_selector .friend_avatar{
background-color:#F9F9F9;
border:1px solid #EDEDED;
padding:3px;
width:50px; height:50px;
position:relative;
overflow:hidden;
display:block;
float:left;
cursor:pointer;
}
.friend_selector .friend_info{ float:left; padding:0 0 0 8px;}
.friend_selector .u_name{ font-weight:bold;}

.friend_selector .friend_avatar img{position:absolute;clip:rect(0px 50px 50px 0px)}
.friend_selector .friend_avatar span{display:block;border:1px solid #1C5180;width:10px;height:10px;_font-size:0px;position:absolute;bottom:3px;left:3px;cursor:pointer;background:url(http://static.test.com/style/v1/images/uc/user/avater_input_bg.gif) no-repeat 0 top}

.friend_selector .selected{border:1px solid #CEE1EE;background-color:#F1F7FC;}
.friend_selector .selected span{background:url(http://static.test.com/style/v1/images/uc/user/avater_input_bg.gif) no-repeat 0 bottom}



.find_friend_type{ margin:20px 0 10px 0;}
.find_friend_type a{display:inline-block;margin-left:3px;padding:1px 7px;*padding:2px 7px 0;_padding:1px 7px;height:18px;line-height:18px;vertical-align:middle;}
.find_friend_type a:hover{text-decoration:none}
.find_friend_type a.selected{background:#4A84C4;color:#FFF;border:1px solid #2470B8}

td.tab_friend_title{border-bottom:1px solid #CEE1EE; background-color:#F0F5F8;color:#555555; font-size:12px; font-weight:bold; padding:2px 0 2px 10px; line-height:20px;}
</style>

</head>
<body>
{include file="inc/head_join.html"}
<div class="page970">
  <div class="guide_setp_container">
    <div class="guide_setp">
      <ul class="clearfix">
        <li class="circular s_visted"></li>
        <li>1.完善资料</li>
        <li class="previous">2.上传头像</li>
        <li class="flish">3.找到好友，进入首页</li>
        <li class="circular e_current"></li>
      </ul>
    </div>
  </div>
  <div class="guide_body">
    <div class="guide_title">
      <h1><strong>找到你的同学、同事、好友等认识你的人并加为好友，就可以了解他们的最新动态。</strong></h1>
    </div>
    <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td style="padding-left:100px;">
        	<div class="find_friend_type">
          <a href="javascript:void(0);" class="selected">找同学</a>
          <a href="javascript:void(0);">找同事</a>
          <a href="javascript:void(0);">找好友</a>
          </div>
        </td>
      </tr>
      <tr>
        <td>
        <table id="table_school_mate" width="600" border="0" cellpadding="3" cellspacing="0" class="uc_table_from" style="margin-top:10px;">
          <tr>
            <td width="140" class="title">学校：</td>
            <td><select name="select" id="select">
            </select></td>
          </tr>
          <tr>
            <td class="title">姓名：</td>
            <td><input type="text" class="text" name="textfield" id="textfield" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="button" value="查找" class="button_bg_blue" id="button" name="button"/></td>
          </tr>
        </table>
        
        <table id="table_colleague" style="display:none;" width="600" border="0" cellpadding="3" cellspacing="0" class="uc_table_from">
          <tr>
            <td width="130" class="title">公司：</td>
            <td><select name="select" id="select">
            </select></td>
          </tr>
          <tr>
            <td class="title">姓名：</td>
            <td><input type="text" name="textfield" id="textfield" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="button" value="查找" class="button_bg_blue" id="button" name="button"/></td>
          </tr>
        </table>
        
        <table id="table_cognitive" style="display:none;" width="600" border="0" cellpadding="3" cellspacing="0" class="uc_table_from">
          <tr>
            <td width="130" class="title">家乡：</td>
            <td><select name="select" id="select">
            </select></td>
          </tr>
          <tr>
            <td class="title">性别：</td>
            <td>
            <label><input type="radio" checked="checked" value="radio2" id="radio2" name="radio2"/>不限</label>
            <label><input type="radio" checked="checked" value="radio2" id="radio2" name="radio2"/>男</label>
            <label><input type="radio" checked="checked" value="radio2" id="radio2" name="radio2"/>女</label>
            </td>
          </tr>
          <tr>
            <td class="title">姓名：</td>
            <td><input type="text" name="textfield" id="textfield" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="button" value="查找" class="button_bg_blue" id="button" name="button"/></td>
          </tr>
        </table>
        
        
        </td>
      </tr>
    </table>
    
    <div>
      <table width="94%" border="0" align="center" cellspacing="0" class="uc_table_from">
        <tr>
          <td class="tab_friend_title">查询结果</td>
        </tr>
        <tr>
          <td>
          <div class="friend_selector">
            <ul class="clearfix">
              <li>
                <div class="friend_avatar"><img src="http://hd61.xiaonei.com/photos/hd61/20081018/22/36/tiny_AYbO_12315f198107.jpg"><span></span></div>
                <div class="friend_info">
                  <p class="u_name"><a target="_blank" title="康静" href="#">康静</a></p>
                  <p>你的大学同学</p>
                </div>
              </li>
            </ul>
          </div>
          <div>1 2 3</div>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <table width="94%" border="0" align="center" cellspacing="0" class="uc_table_from">
        <tr>
          <td class="tab_friend_title">已选用户</td>
        </tr>
        <tr>
          <td>
          <div class="friend_selector">
            <ul class="clearfix">
              <li>
                <div class="friend_avatar selected"><img src="http://hdn.xnimg.cn/photos/hdn521/20090928/1900/tiny_8e6w_1294h019117.jpg"><span></span></div>
              </li>
            </ul>
          </div>
          </td>
        </tr>
      </table>
      <table width="98%" border="0" align="center" cellspacing="0" class="uc_table_from">
        <tr>
          <td width="130" class="title">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top" class="title">验证信息：</td>
          <td><textarea name="textarea" id="textarea" cols="60" rows="4" class="text">我是你的同学田海深，请加我！</textarea></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="button" value="向全部选中的用户发送好友请求" class="button_bg_blue" id="button" name="button"/></td>
        </tr>
      </table>
    </div>
    
    <span class="button button_main"><span><button id="vote_submitEl" tabindex="150" type="button">完成，进入首页</button></span></span>
  </div>
</div>
{include file="inc/footer.html"}
{literal}
<script type="text/javascript" src="http://static.test.com/js/lib/jquery.js"></script>
<script language="javascript">

$(function(){
}); 
</script>
{/literal}
</body>
</html>
